<template>
  <div class="technology-manage-change">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="search-container">
        <div class="search-item">
          <el-input placeholder="名称" v-model="name" @keydown.native.enter="handleSearch"></el-input>
          <el-button type="primary" @click="handleSearch">
            <i class="el-icon-search"></i>
          </el-button>
          <el-button type="primary" @click="handleRefresh">
            <i class="el-icon-refresh"></i>
          </el-button>
        </div>
        <div class="search-item">
          <el-button v-if="hasTabUpload" type="primary" @click="uploadVisible = true">上传</el-button>
        </div>
      </div>
      <div class="table-container">
        <el-table
          class="table-content"
          v-loading="tableLoading"
          element-loading-custom-class="custom-load"
          :data="tableData">
          <el-table-column label="变更名称" prop="file_name"></el-table-column>
          <el-table-column label="变更时间">
            <template slot-scope="scope">
              <div class="detail-info">
                {{ scope.row.upload_time
                ? $moment(scope.row.upload_time).format('yyyy-MM-DD HH:mm:ss')
                : ''
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <span style="display: none;"></span>
              <span v-if="hasTableDownLoad" class="btn" @click="handleDownload(scope.row)">下载</span>
              <span v-if="hasTableDel" class="btn" @click="handleDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>
    <upload-model
      :visible="uploadVisible"
      :loading="btnLoading"
      @submit="handleUpload"
      @cancel="uploadVisible = false">
    </upload-model>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import UploadModel from '@/components/project/technologyManage/uploadModel';

export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '技术管理',
        },
        {
          name: '变更管理'
        }
      ],
      name: '',
      hasSearch: false,
      tableLoading: false,
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNo: 1,
      uploadVisible: false,
      btnLoading: false,
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    }
  },
  created() {
    this.getTableData();
  },
  components: {
    Breadcrumb,
    UploadModel
  },
  methods: {
    /**
       * 获取列表数据
       */
    async getTableData() {
      const params = {
        project_id: this.projectId,
        page: String(this.pageNo),
        limit: String(this.pageSize)
      };
      const hasSearch = this.hasSearch && this.name;
      if (hasSearch) {
        params.keywords = this.name;
      }
      this.tableLoading = true;
      const { success, data } = hasSearch
        ? await this.$Model.fuzzySearchChangeFile(params)
        : await this.$Model.getChangeFile(params);
      this.tableLoading = false;
      if (success && Array.isArray(data.data)) {
        this.tableData = data.data;
      }
    },
    /**
       * 搜索
       */
    handleSearch() {
      if (this.name) {
        this.hasSearch = true;
      } else {
        this.hasSearch = false;
        this.pageNo = 1;
        this.pageSize = 10;
      }
      this.getTableData();
    },
    // 重置
    handleRefresh() {
      this.clear();
      this.hasSearch = false;
      this.name = '';
      this.getTableData();
    },
    /**
       * pageSize 改变时会触发
       * @param pageSize 每页条数
       */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
       * currentPage 改变时会触发
       * @param pageNo 当前页
       */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    /**
     * 上传
     */
    async handleUpload({ file }) {
      if (!file) return;
      const fm = new FormData();
      fm.append('change_file', file);
      fm.append('project_id', this.projectId);
      const { success } = await this.$Model.changeFileUpload(fm);
      if (success) {
        this.$message.success('上传成功');
        this.uploadVisible = false;
        this.getTableData();
      }
    },
    /**
     * 计划列表下载
     * @param row {Object}
     */
    handleDownload(row) {
      if (!row.url) {
        this.$message.warning('下载地址失效');
        return;
      }
      window.open(this.$checkUrl(row.url));
    },
    /**
     * 删除附件
     * @param row {Object}
     */
    handleDelete(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.deleteChangeFile({
          uuid: row.uuid
        });
        if (success) {
          this.$message.success('删除成功');
          this.clear();
          this.getTableData();
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/table';

  .technology-manage-change {
    width: 100%;
    height: 100%;
    background: $mainBg;
    color: #fff;
    position: relative;
    .breadcrumb {
      width: 100%;
      height: 30px;
      /deep/ .breadcrumb-comp {
        height: 30px;
        border: none;
      }
    }
    main {
      width: 100%;
      height: calc(100% - 40px);
      padding: 0 20px;
      .search-container {
        width: 100%;
        height: 50px;
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        .search-item {
          height: 100%;
          float: left;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 20px;
          .el-button {
            margin-left: 10px;
          }
        }
      }
      .table-container {
        width: 100%;
        height: calc(100% - 80px);
        background-color: $mainBg;
        border-radius: 10px;
        position: relative;
        .table-content {
          height: calc(100% - 50px);
          /deep/ .el-table__body-wrapper {
            height: 100%;
            padding-bottom: 46px;
            overflow-y: auto;
            .btn {
              padding: 0 5px;
              cursor: pointer;
              color: $mainColor;
            }
          }
        }
      }
    }
  }

</style>
